<template>
	<view class="self-box">
		<view class="tip">
			2022年06月13日 08时至2022年06月15日 10时，已向全省<text class="tip-blue">0</text>个地市，<text class="tip-blue"
				>0</text
			>个县区发布地灾风险预警提醒，<text class="tip-blue">0</text>个地市，<text class="tip-blue">0</text>个县区已响应。
		</view>

		<view class="tb" v-if="list.length > 0">
			<u-collapse>
				<u-collapse-item v-for="(item, index) in list" :key="index" @change="(e) => colChange(index, e)">
					<template slot="title-all">
						<view class="col-box">
							<view class="col-list">
								<i class="iconfont icon-dingweibai pos-icon"></i>
								<view :class="{ 'col-list-active': openList.includes(index) }" class="col-list-title">{{
									item.name
								}}</view>
							</view>
							<u-icon v-show="openList.includes(index)" name="arrow-up-fill" size="20" color="#607589"></u-icon>
							<u-icon v-show="!openList.includes(index)" name="arrow-down-fill" size="20" color="#607589"></u-icon>
						</view>
					</template>
					<view class="col-child-box">
						<view
							v-for="(cItem, cIndex) in item.children"
							:key="cIndex"
							class="col-child-title"
							@click="fnPreview(cItem)"
							>{{ cItem.title }}</view
						>
					</view>
					<!-- <view class="col-child-box">
					<u-collapse :arrow="false">
						<u-collapse-item v-for="(cItem, cIndex) in item.children" :key="cIndex" :disabled="true">
							<template slot="title">
								<view class="col-child-title">{{ cItem.title }}</view>
							</template>
							<view class="col-child-body">
								<view class="col-child-btn1 mr10" @click="fnPreview(cItem)">预览</view>
								<view class="col-child-btn2" @click="fnDown(cItem)">下载word文档</view>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view> -->
				</u-collapse-item>
			</u-collapse>
		</view>
		<view class="empty-box" v-if="list.length == 0">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
	</view>
</template>
<script>
	import moment from 'moment'
	import warnApi from '@/api/monitor/warn.js'
	export default {
		name: 'dz',
		data() {
			return {
				list: [],
				openList: [],
			}
		},
		methods: {
			async init() {
				uni.showLoading({
					title: '加载中'
				})
				let dtEnd = moment().format('YYYY-MM-DD HH:00')
				let dtBegin = dtEnd
				const params = {
					link: `https://fjsdz.cn:50001/risk/proxy/getProductListByAreaCodesAndTimeRange?beginTime=${dtBegin}&endTime=${dtEnd}&cityVacode=350400000000`
				}
				let res = await warnApi.getDzList(params)
				this.list = res.data.countyObj || []
				this.$hideLoading()
			},
			colChange(idx, val) {
				this.openList = []
				if (val.show) {
					this.openList.push(idx)
				}
			},
			fnPreview(val) {
				// uni.downloadFile({
				// 	url: val.fullfilepath,
				// 	success: function (res) {
				// 		var filePath = res.tempFilePath
				// 		uni.openDocument({
				// 			filePath: filePath,
				// 			showMenu: true,
				// 			success: function (res) {
				// 				console.log('打开文档成功')
				// 			}
				// 		})
				// 	}
				// })
			}
		},
		computed: {},
		mounted() {
			this.init()
		}
	}
</script>
<style lang="less" scoped>
	.self-box {
		height: 100%;
		width: 100%;

		.tip {
			padding: 10rpx 20rpx;
			border: 2rpx dashed #0085ff;
			border-radius: 20rpx;
			font-weight: 500;
			color: #5b5b5b;
			margin-bottom: 20rpx;
			.tip-blue {
				color: #0085ff;
			}
		}
		.tb {
			.col-box {
				width: 100%;
				padding-right: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.col-list {
				display: flex;
				align-items: center;
				.pos-icon {
					color: #0085ff;
				}
				.col-list-title {
					margin-left: 20rpx;
				}
				.col-list-active {
					color: #0085ff;
				}
			}
			.col-child-box {
				margin-left: 20rpx;
				.col-child-title {
					color: #464646;
					padding: 12rpx 0;
					border-bottom: 2rpx solid #e2e2e2;
				}
				.col-child-body {
					background: #e8f4ff;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					padding: 10rpx;
					.col-child-btn1 {
						padding: 5rpx 20rpx;
						font-weight: 600;
						color: #0085ff;
						border: 2rpx solid #0085ff;
						border-radius: 5rpx;
					}
					.col-child-btn2 {
						color: #fff;
						padding: 5rpx 20rpx;
						font-weight: 600;
						border: 2rpx solid #0085ff;
						background: #0085ff;
						border-radius: 5rpx;
					}
				}
			}
			::v-deep .u-collapse-head {
				border-bottom: 2rpx solid #e2e2e2;
			}
		}
		.mr10 {
			margin-right: 10rpx;
		}
		.empty-box {
			margin-top: 60rpx;
		}
	}
</style>
